import React, { Component } from 'react'
import { Divider, Input, Button, Icon, Table, Popconfirm } from 'antd';
import { connect } from 'dva'
import styles from './index.less'

@connect(({ telBook, loading }) => ({ 

    selectedNode: telBook.selectedNode,
    telList: telBook.telList,
    page: telBook.page,
    total: telBook.total,
    fetchSelTelBookByUserIdLoading: loading.effects['telBook/fetchSelTelBookByUserId'],
    //fetchSelLv1ByUserIdLoading: loading.effects['telBook/fetchSelLv1ByUserId'],
}))
export default class componentName extends Component {

    columns = [{
        title: '姓名',
        dataIndex: 'name',
        key: 'name',
        width: 100,
        fixed: 'left'
      },{
        title: '电话号',
        dataIndex: 'phone',
        key: 'phone',
        width: 150,
        fixed: 'left'
      },{
        title: '分组',
        dataIndex: 'groupName',
        key: 'groupName',
        width: 100,
      },{
        title: '性别',
        dataIndex: 'sex',
        key: 'sex',
        width: 60,
      },{
        title: '职务',
        dataIndex: 'duties',
        key: 'duties',
        width: 100,
      },{
        title: '固定电话',
        dataIndex: 'landTel',
        key: 'landTel',
        width: 150,
      },{
        title: '集团小号',
        dataIndex: 'cliqueTel',
        key: 'cliqueTel',
        width: 150,
      }, {
        title: '操作',
        key: 'action',
        width: 100,
        render: (text, record) => (
          <span>
            <a href="javascript:;" onClick = {()=>{
                    const {addSendListFunc} = this.props
                    addSendListFunc(
                        {
                            type: "telBook",
                            node: record
                        }
                    )
                }}>添加</a>
          </span>
        ),
      }];

    setPage = (e) =>{
        const { dispatch, selectedNode, selName, selPhone } = this.props
        dispatch({
            type: 'telBook/fetchSelTelBookByUserId',
            payload: {
                name: null,
                phone: null,
                page: e,
                groupId: selectedNode.id ? selectedNode.id : null
            }
        })
    }

    render() {
        const { 
                selectedNode, //获取选中分组节点信息
                fetchSelTelBookByUserIdLoading, 
                telList, 
                page, 
                total 
                } = this.props
        return (
            <div>
                {/* <div className = {styles.query}>
                    <div className = {styles.search}>
                        <Input value = {selectedNode.name?selectedNode.name:"全部分组"} 
                        className = {styles.inpt} disabled = {true} />
                        {
                            selectedNode.name?
                            <Icon style={{ color: '#801919',marginTop:'5px',marginLeft: '5px' }} type="close" 
                                onClick = {()=>{
                                    const { dispatch } = this.props
                                    dispatch({
                                        type: 'telBookEnterprise/setSelectedNode',
                                        payload: {
                                            id: false,
                                            name: false
                                            }
                                    })
                                }}
                            />
                            : null
                        }
                        <Input placeholder = "姓名" className = {styles.inpt} onChange = {(e)=>{
                            const { dispatch } = this.props
                            dispatch({
                                type: 'telBookEnterprise/setSelName',
                                payload: e.target.value
                            })
                        }}/>
                        <Input placeholder = "电话" className = {styles.inpt} onChange = {(e)=>{
                            const { dispatch } = this.props
                            dispatch({
                                type: 'telBookEnterprise/setSelPhone',
                                payload: e.target.value
                            })
                        }}/>
                        <Button style = {{'marginLeft':'20px'}} type="primary" onClick = {()=>{
                            const { dispatch, selectedNode, selName, selPhone, page } = this.props
                            dispatch({
                                type: 'telBookEnterprise/fetchSelTelBookByEnterprise',
                                payload: {
                                    name: selName,
                                    phone: selPhone,
                                    page: page,
                                    groupId: selectedNode.id ? selectedNode.id : null
                                }
                            })
                        }}>查询</Button>
                    </div>
                </div>
                <Divider/> */}
                <Table 
                    style={{ width:"100%"}}
                    loading={fetchSelTelBookByUserIdLoading}
                    columns={this.columns} 
                    dataSource={telList} 
                    scroll={{ x: 910, y: 240 }}
                    pagination = {{
                        current: page,
                        total: total,
                        onChange: this.setPage
                    }}
                    />

                <div>
                </div>
            </div>
        )
    }
    componentDidMount(){
        const { dispatch,  } = this.props
        dispatch({
            type: 'telBook/fetchSelTelBookByUserId',
            payload: {
                page: 1
            }
        })
    }
}
